<template>
  <ex-dialog
    width="800px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >
    <div class="main">
      <el-form
        :model="filter"
        status-icon
        :rules="filterRules"
        ref="filter"
        :label-width="labelWidth"
        class="demo-ruleForm"
      >
        <p class="text" style="margin-bottom: 20px">开通积分营销板块将自动创建客户账户</p>
        <el-form-item label="登陆账号："  prop="account">
            <el-input type="text" v-model="filter.account" placeholder="填输入登陆账号" style="width: 250px;" disabled></el-input> 
        </el-form-item>
        <el-form-item label="账户昵称："  prop="nickName">
            <el-input type="text" v-model="filter.nickName" placeholder="填输入账户昵称" style="width: 250px;"></el-input> 
        </el-form-item>
        <el-form-item label="积分价值：" prop="integralValue">
          <div class="listBox">
            <div class="txtold">1积分可抵</div>
            <el-input
              type="text"
              v-model="filter.integralValue"
              placeholder="填输入积分价值"
              :style="{ width: inputWidth }"
            >
              <template slot="append">元</template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="关联绑定抖音账号："  prop="dyNumber">
            <el-input type="text" v-model="filter.dyNumber" placeholder="填输入抖音账号" style="width: 250px;"></el-input> 
        </el-form-item>
        <el-form-item label="关联绑定来客账号：" prop="" key="3">
          <el-select filterable v-model="filter.dyShopAccountId" placeholder="请选择" clearable :style="{ width: inputWidth }">
            <el-option v-for="item in shopList" :key="item.id" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClose('ruleForm')">取消</el-button>
          <el-button type="primary" @click="submitForm('filter')" v-if="isintegralAdd"
            >确认开通</el-button
          >
          <el-button
            type="primary"
            @click="submitForm('filter')"
            :loading="buttonLoading"
            v-else-if="isintegralAdd == false"
            >确认修改</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- end -->
  </ex-dialog>
</template>
  <script>
// components
import Loading from "@/components/Loading/index";
import ImageUploadMoreOldUrl from "@/components/ImageUploadMoreOldUrl";
// api
import {
  openintegral,
  editintegral,
  integralDetail,
  dyMerchantList,
} from "@/api/merchants/merchantsFunction";

export default {
  components: {
    Loading,
    ImageUploadMoreOldUrl,
  },
  props: {
    visible: Boolean,
    id: {
      type: String,
      default: "",
    },
    phone: {
      type: String,
      default: "",
    },
    merchantName: {
      type: String,
      default: "",
    },
    merchantId: {
      type: String,
      default: "",
    },
    isintegralAdd: {
      type: Boolean,
      value: true,
    },
  },
  data() {
    var checkIntegralValue = (rule, value, callback) => {
      //销售原价校验
      let regNumber = /(^[1-9](\d+)?(\.\d{1,4})?$)|(^\d\.\d{1,4}$)/; //大于0的数值且最多保留两位小数的数值
      if (regNumber.test(value) == false || value == "0.000" || value == "0.00" || value == "0.00" || value == "0.0") {
        return callback(new Error("请填写大于0且最多4位小数的数值"));
      } else {
        return callback();
      }
    };

    return {
      labelWidth: "140px",
      inputWidth: "280px",
      title: "开通积分营销",
      loading: false,
      buttonLoading: false,
      data: {},
      input: "",
      type: "",
      shopList: [],
      filter: {
        id: '',
        account: '',//登陆账号
        dyNumber: "", //关联绑定抖音账号
        dyShopAccountId: "", //抖音生活服务商Id
        integralValue: "", //积分价值
        nickName: "", //账户昵称
      },
      filterRules: {
        account: [
          {required: true,message: "请输入登陆账号",trigger: ["change", "blur"],},
        ],
        nickName: [
          {required: true,message: "请输入账户昵称",trigger: ["change", "blur"],},
        ],
        integralValue: [
          {validator: checkIntegralValue,required: true,trigger: ["change", "blur"],},
        ],
      },
    };
  },
  computed: {},
  created() {
    this.title = "开通积分营销";
    this.filter.id = this.id
    this.filter.account = this.phone
    this.filter.nickName = this.merchantName
    this.getMerchant()
    console.log('this.isintegralAdd',this.isintegralAdd)
    if(this.isintegralAdd == false){
      this.getDetail()
    }
  },
  methods: {
    //获取来客账号列表
    getMerchant(){
      var data = {
        merchantId: this.id
      }
      dyMerchantList(data).then(res => {
        this.shopList = res.result
      })
    },
    //获取详情
    getDetail(){
      integralDetail(this.id).then(res => {
        this.filter = res.result
      })
    },
    //确认开通
    submitForm(formName) {
      console.log('idsssssssss',this.id)
      this.$refs[formName].validate((valid) => {
        console.log("valid", valid);
        if (valid) {
          let data = {
            ...this.filter,
          };
          console.log('this.isintegralAdd',this.isintegralAdd);
          if(this.isintegralAdd == true){
            openintegral(data)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.$emit("success");
                this.handleClose();
              }
            })
            .catch(() => {});
          }else if(this.isintegralAdd == false){
            editintegral(data)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.$emit("success");
                this.handleClose();
              }
            })
            .catch(() => {});
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
   
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
  <style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }

  ::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  ::v-deep input[type="number"] {
    -moz-appearance: textfield !important;
  }
}

.main {
  .listBox{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .txtold{
      font-size: 16px;
      color: #333;
      font-weight: bold;
      margin-right: 10px;
    }
  }
  .text {
    line-height: 1.6;
    margin-top: 14px;
    font-weight: 600;
    color: #333;
    font-size: 20px;
  }

  .inp {
    margin-top: 12px;
  }

  .btn {
    margin-top: 12px;
    display: flex;
    justify-content: center;
  }
}
</style>
  